<template>
  <div class="footer">
    <ul class="clearfix">
      <li
        class="fl ico1"
        :class="footIndex==1 ? 'on' : ''"
        @click="footBtn(1)"
      >
        <i></i>
        <p>首页</p>
      </li>
      <li
        class="fl ico2"
        :class="footIndex==2 ? 'on' : ''"
        @click="footBtn(2)"
      >
        <i></i>
        <p>钱包</p>
      </li>
      <li
        class="fl ico3"
        :class="footIndex==3 ? 'on' : ''"
        @click="footBtn(3)"
      >
        <i></i>
        <p>公告</p>
      </li>
      <li
        class="fl ico4"
        :class="footIndex==4 ? 'on' : ''"
        @click="footBtn(4)"
      >
        <i></i>
        <p>我的</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['footIndex'],
  data () {
    return {}
  },
  methods: {
    footBtn: function (e) {
      if (e === 1) {
        this.$router.push({
          path: '../index'
        })
      } else if (e === 2) {
        this.$router.push({
          path: '../wallet'
        })
      } else if (e === 3) {
        this.$router.push({
          path: '../notice'
        })
      } else if (e === 4) {
        this.$router.push({
          path: '../user'
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #0076bb;
  height: 0.98rem;
  li {
    width: 25%;
    i {
      height: 0.38rem;
      background-position: center;
      background-repeat: no-repeat;
      display: block;
      margin-top: 0.21rem;
    }
    p {
      font-size: 0.2rem;
      color: #ffffff;
      text-align: center;
      margin-top: 0.05rem;
    }
    &.ico1 {
      i {
        background-image: url("../include/img/footer_ico1.png");
        background-size: 0.4rem 0.38rem;
      }
      &.on {
        i {
          background-image: url("../include/img/footer_ico5.png");
          background-size: 0.4rem 0.38rem;
        }
      }
    }
    &.ico2 {
      i {
        background-image: url("../include/img/footer_ico2.png");
        background-size: 0.4rem 0.38rem;
      }
      &.on {
        i {
          background-image: url("../include/img/footer_ico6.png");
          background-size: 0.4rem 0.38rem;
        }
      }
    }
    &.ico3 {
      i {
        background-image: url("../include/img/footer_ico3.png");
        background-size: 0.4rem 0.38rem;
      }
      &.on {
        i {
          background-image: url("../include/img/footer_ico7.png");
          background-size: 0.4rem 0.38rem;
        }
      }
    }
    &.ico4 {
      i {
        background-image: url("../include/img/footer_ico4.png");
        background-size: 0.4rem 0.38rem;
      }
      &.on {
        i {
          background-image: url("../include/img/footer_ico8.png");
          background-size: 0.4rem 0.38rem;
        }
      }
    }
  }
}
</style>
